<!--
*  功能描述：合同收款综合统计
 -->
  <template>
  <div>
      <el-row>
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >合同收款查询</el-tag
    >
    <el-form :inline="true" :model="server" class="demo-form-inline">
        <el-form-item label="甲方联系人">
          <el-select v-model="server.ClientId" clearable placeholder="甲方联系人">
            <el-option
              v-for="item in data"
              :key="item.PersonId"
              :value="item.PersonId"
              :label="item.PersonNmae"
              >{{ item.PersonNmae }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="server.ContractNumber" clearable placeholder="合同编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
          <el-button type="primary" @click="GetContractExcel" style="background-color:red">导出excel</el-button>
        </el-form-item>
      </el-form>
      <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >自定义条件查询</el-tag>
      <el-col :span="24">
        <el-checkbox v-model="cuid">合同名称</el-checkbox>
        <el-checkbox v-model="cuname">合同额(万元)</el-checkbox>
        <el-checkbox v-model="cuphone">实收总额(万元)</el-checkbox>
      </el-col>

      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <v-show v-if="cuid">
            <el-form-item label="合同名称">
              <el-input v-model="ContractName" clearable placeholder="合同名称"></el-input>
            </el-form-item>
          </v-show>
          <v-show v-if="cuname">
            <el-form-item label="合同额(万元)">
              <el-input v-model="OriginalContractPrice" clearable placeholder="合同额(万元)"></el-input>
            </el-form-item>
          </v-show>

          <v-show v-if="cuphone">
            <el-form-item label="实收总额(万元)">
              <el-input v-model="RealyContractPrice" clearable placeholder="实收总额(万元)"></el-input>
            </el-form-item>
          </v-show>
          <el-form-item>
            <el-button type="primary" @click="cha">查询</el-button>
            
          </el-form-item>
        </el-form>
        <el-descriptions title="客户信息" border>
        </el-descriptions>
      </el-col>


    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >合同收款明细列表</el-tag
    >
    <div>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="ContractNumber"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="ContractName"
      label="合同名称">
    </el-table-column>
    <el-table-column
      prop="PName"
      label="甲方联系人">
    </el-table-column>
    <el-table-column
      prop="OriginalContractPrice"
      label="合同额(万元)">
    </el-table-column>
    <el-table-column
      prop="RealyContractPrice"
      label="实收总额(万元)">
    </el-table-column>    
    <el-table-column label="操作" width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.ContractId)" type="text" size="small"
              >查看</el-button
            >
          </template>
          </el-table-column>
  </el-table>
  <el-pagination style="text-align: center;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[8,15,20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data:[],
        ContractName:'',
        OriginalContractPrice:'',
        RealyContractPrice:'',
        cuid: false,
      cuname: false,
      cuphone: false,
        dataxl:[],
        tableData:[],
        pageindex:1,
        pagesize:8,
        totalCount:0,
        pid:0,
        dialogVisible:false,
        server: {
            ContractNumber:'',
            ClientId:'',
      },
    };
  },
  methods: {
      handleClick(ContractId){
        this.$router.push({
        path: '/cockListEditInfo',
        name: 'CockListEditInfo',
        params: {
          ContractId: ContractId
        }
      })
    },
    DeptXl() {
      this.$http({
        url: "LeadingCockpit/ShowReponsble",
        method: "get",
      }).then((res) => {
        this.data = res.data;
        console.log(this.data);
      });
    },
      cha(){
          this.ShowConpro();
      },
    onsubmit(){
      this.ShowConpro();
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.ShowConpro();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.ShowConpro();
    },
    GetContractExcel() {
        window.open("LeadingCockpit/GetExecel1")
    },
    ShowConpro(){
            this.$http({
        url: "LeadingCockpit/GetContInfo",
        method: "Get",
        params: {
          pageindex: this.pageindex,
          pagesize: this.pagesize,
          ContractNumber:this.server.ContractNumber,
          ClientId:this.server.ClientId,
          ContractName:this.ContractName,
          OriginalContractPrice:this.OriginalContractPrice,
          RealyContractPrice:this.RealyContractPrice,
        },
      }).then((res) => {
        (this.tableData = res.data.Data),
          (this.totalCount = res.data.totalCount);
      });
        },
        
  },
  created() {
    this.ShowConpro();
    this.onsubmit();
    this.cha();
    this.DeptXl();
  },
};
</script>